import React from 'react'
import { useLocation } from 'react-router-dom'
import {
  Row,
  Col,
  Card,
  Table,
  Button,
  Space,
  Progress,
  Tag
} from '@hi-ui/hiui'
import './Dashboard.css'

const Dashboard = () => {
  const location = useLocation()
  const pathname = location.pathname

  // 统计数据
  const statistics = [
    { title: '总用户数', value: 1234, prefix: '👥', color: '#1890ff' },
    { title: '今日活跃', value: 89, prefix: '🔥', color: '#52c41a' },
    { title: '总订单数', value: 5678, prefix: '📦', color: '#faad14' },
    { title: '总收入', value: '¥123,456', prefix: '💰', color: '#f5222d' }
  ]

  // 最近活动数据
  const recentActivities = [
    { id: 1, user: '张三', action: '登录系统', time: '2分钟前', status: 'success' },
    { id: 2, user: '李四', action: '创建订单', time: '5分钟前', status: 'success' },
    { id: 3, user: '王五', action: '更新用户信息', time: '10分钟前', status: 'warning' },
    { id: 4, user: '赵六', action: '删除文件', time: '15分钟前', status: 'error' }
  ]

  // 系统状态数据
  const systemStatus = [
    { name: 'CPU使用率', value: 45, color: '#52c41a' },
    { name: '内存使用率', value: 78, color: '#faad14' },
    { name: '磁盘使用率', value: 32, color: '#1890ff' },
    { name: '网络使用率', value: 65, color: '#722ed1' }
  ]

  // 表格列配置
  const columns = [
    { title: '用户', dataIndex: 'user', key: 'user' },
    { title: '操作', dataIndex: 'action', key: 'action' },
    { title: '时间', dataIndex: 'time', key: 'time' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const statusMap = {
          success: { color: 'success', text: '成功' },
          warning: { color: 'warning', text: '警告' },
          error: { color: 'error', text: '错误' }
        }
        const { color, text } = statusMap[status] || {}
        return <Tag color={color}>{text}</Tag>
      }
    }
  ]

  // 渲染概览页面
  const renderOverview = () => (
    <div className="dashboard-overview">
      <Row gutter={[24, 24]}>
        {statistics.map((stat, index) => (
          <Col span={6} key={index}>
            <Card className="stat-card">
              <div className="statistic">
                <div className="statistic-title">{stat.title}</div>
                <div className="statistic-content">
                  <span className="statistic-prefix" style={{ color: stat.color }}>
                    {stat.prefix}
                  </span>
                  <span className="statistic-value" style={{ color: stat.color }}>
                    {stat.value}
                  </span>
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: '24px' }}>
        <Col span={16}>
          <Card title="最近活动" extra={<Button type="link">查看全部</Button>}>
            {/* 暂时使用简单的列表替代 Table 组件 */}
            <div className="activity-list">
              {recentActivities.map((activity) => (
                <div key={activity.id} className="activity-item">
                  <div className="activity-user">{activity.user}</div>
                  <div className="activity-action">{activity.action}</div>
                  <div className="activity-time">{activity.time}</div>
                  <div className="activity-status">
                    <Tag color={
                      activity.status === 'success' ? 'success' : 
                      activity.status === 'warning' ? 'warning' : 'error'
                    }>
                      {activity.status === 'success' ? '成功' : 
                       activity.status === 'warning' ? '警告' : '错误'}
                    </Tag>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="系统状态">
            <div className="system-status">
              {systemStatus.map((item, index) => (
                <div key={index} className="status-item">
                  <div className="status-header">
                    <span className="status-name">{item.name}</span>
                    <span className="status-value">{item.value}%</span>
                  </div>
                  <Progress
                    percent={item.value}
                    strokeColor={item.color}
                    showInfo={false}
                    size="small"
                  />
                </div>
              ))}
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  )

  // 渲染数据分析页面
  const renderAnalytics = () => (
    <div className="dashboard-analytics">
      <Row gutter={[24, 24]}>
        <Col span={12}>
          <Card title="用户增长趋势">
            <div className="chart-placeholder">
              <p>这里可以集成图表库（如 ECharts、Recharts）</p>
              <p>显示用户数量随时间的变化趋势</p>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="订单统计">
            <div className="chart-placeholder">
              <p>这里可以显示订单相关的统计图表</p>
              <p>包括订单数量、金额等数据</p>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: '24px' }}>
        <Col span={24}>
          <Card title="数据导出" extra={
            <Space>
              <Button>导出Excel</Button>
              <Button>导出PDF</Button>
              <Button type="primary">生成报告</Button>
            </Space>
          }>
            <div className="export-content">
              <p>支持多种格式的数据导出功能</p>
              <p>可以生成详细的业务分析报告</p>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  )

  // 根据路径渲染不同内容
  const renderContent = () => {
    if (pathname.includes('analytics')) {
      return renderAnalytics()
    }
    return renderOverview()
  }

  return (
    <div className="dashboard">
      <div className="dashboard-header">
        <h1>{pathname.includes('analytics') ? '数据分析' : '仪表盘概览'}</h1>
        <p>欢迎回来，这里是您的数据概览</p>
      </div>
      
      {renderContent()}
    </div>
  )
}

export default Dashboard
